{% load staticfiles %}
{% load notifications_tags %}
{% notifications_unread as unread_count %}
<!DOCTYPE html>
<html lang="en" class="app">
<head>
  <meta charset="utf-8" />
  <title>Aurora | 原创音乐者交流平台</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="{% static 'js/jPlayer/jplayer.flat.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/Lobibox.min.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/animate.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/simple-line-icons.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/font.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/app.css' %}" type="text/css" />
</head>
<body class="">
  <section class="vbox">
    <header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
      <div class="navbar-header aside bg-info nav-xs">
        <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
          <i class="icon-list"></i>
        </a>
        <a href="{% url 'music:index' %}" class="navbar-brand text-lt">
          <i class="icon-earphones"></i>
          <img src="{% static 'images/logo.png' %}" alt="." class="hide">
          <span class="hidden-nav-xs m-l-sm">Aurora</span>
        </a>
        <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
          <i class="icon-settings"></i>
        </a>
      </div>
      <ul class="nav navbar-nav hidden-xs">
        <li>
          <a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
            <i class="fa fa-indent text"></i>
            <i class="fa fa-dedent text-active"></i>
          </a>
        </li>
      </ul>
    <!-- 搜索功能 -->
      <form action="{% url 'music:music_search' %}" class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
            <input type="text" name="q" class="form-control input-sm no-border rounded" placeholder="搜索想听的音乐...">
            <input type="hidden" name="next" value="{{ request.path }}">
          </div>
        </div>
      </form>
    <!-- /搜索功能 -->
      <div class="navbar-right ">
        <ul class="nav navbar-nav m-n hidden-xs nav-user user">
          <li class="hidden-xs">
            <a href="#" class="dropdown-toggle lt" data-toggle="dropdown">
              <i class="icon-bell"></i>
              <span class="badge badge-sm up bg-danger">{{ unread_count }}</span>
            </a>
            <section class="dropdown-menu aside-xl animated fadeInUp">
              <section class="panel bg-white">
                <div class="panel-heading b-light bg-light">
                {% if not unread_count %}
                  <strong>暂时没有新消息</strong>
                {% else %}
                  <strong>你有 <span>{{ unread_count }}</span> 条未读消息</strong>
                {% endif %}
                </div>
                <ul class="list-group list-group-alt">
                {% for notification in request.user.notifications.unread %}
                  <li href="#" class="media list-group-item">
{#                    <span class="pull-left thumb-sm"></span>#}
                    <span class="pull-left media-xs">
                    {% if notification.target %}
                      {{ notification.verb }}《{{ notification.target }}》<br>
                    {% else %}
                        {{ notification.verb }}
                    {% endif %}
                      <small class="text-muted">{{ notification.timesince }} 之前</small>
                    </span>
                    <span class="pull-right">
                      <a href="{% url 'notifications:delete' notification.slug %}?next={{ request.path }}"><i class="fa fa-times fa-fw"></i></a>
                    </span>
                  </li>
                {% endfor %}
                </ul>
                <div class="panel-footer text-sm">
                  <a href="{% url 'notifications:mark_all_as_read' %}?next={{ request.path }}">全部标为已读</a>
                </div>
              </section>
            </section>
          </li>
          <li class="dropdown">
          {% if user.is_authenticated %}
            <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="{{ user.avatar.url }}" alt="...">
              </span>
              {{ user.username }} <b class="caret"></b>
            </a>
            <ul class="dropdown-menu animated fadeInRight">
              <li>
                <a href="{% url 'user:show_profile'%}">个人中心</a>
              </li>
              <li>
                <a href="{% url 'music:music_upload' %}">上传音乐</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="{% url 'logout' %}?next={% url 'music:index' %}">注销</a>
              </li>
            </ul>
          {% else %}
            <a href="javascript:void(0)" class="dropdown-toggle bg clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="{% static 'images/unlisted.jpg' %}" alt="...">
              </span>
              游客 <b class="caret"></b>
            </a>
              <ul class="dropdown-menu animated fadeInRight">
                  <li>
                    <span class="arrow top"></span>
                    <a href="{% url 'user:user_login' %}?next={{ request.path }}">登录</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="{% url 'user:register' %}">注册</a>
                  </li>
                </ul>
          {% endif %}
          </li>
        </ul>
      </div>
    </header>
    <section>
      <section class="hbox stretch">
        <!-- .aside -->
        <aside class="bg-black dk nav-xs aside hidden-print" id="nav">
          <section class="vbox">
            <section class="w-f-md scrollable">
              <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">
                <!-- nav -->
                <nav class="nav-primary hidden-xs">
                  <ul class="nav bg clearfix">
                    <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                      发现
                    </li>
                    <li>
                      <a href="javascript:void(0)" onclick="jump('{% url 'music:music' %}')">
                        <i class="icon-music-tone-alt icon text-info"></i>
                        <span class="font-bold">音乐</span>
                      </a>
                    </li>
                    <li>
                      <a href="javascript:void(0)" onclick="jump('{% url 'post:post' %}')">
                        <i class="fa-comments fa text-primary-lter"></i>
{#                        <b class="badge bg-primary pull-right">6</b>#}
                        <span class="font-bold">论坛</span>
                      </a>
                    </li>
                    <li class="m-b hidden-nav-xs"></li>
                  </ul>
                </nav>
                <!-- / nav -->
              </div>
            </section>

            <footer class="footer hidden-xs no-padder text-center-nav-xs">
              <div class="bg hidden-xs ">
                  <div class="dropdown dropup wrapper-sm clearfix">
                  {% if user.is_authenticated %}
                    <a class="dropdown-toggle" data-toggle="dropdown">
                      <span class="thumb-sm avatar pull-left m-l-xs">
                        <img src="{{ user.avatar.url }}" class="dker" alt="...">
                      </span>
                      <span class="hidden-nav-xs clear">
                        <span class="block m-l">
                          <strong class="font-bold text-lt">{{ user.username }}</strong>
                        </span>
                        <span class="text-muted text-xs block m-l">原创音乐人</span>
                      </span>
                    </a>
                  {% else %}
                      <a class="dropdown-toggle" data-toggle="dropdown">
                          <span class="thumb-sm avatar pull-left m-l-xs">
                            <img src="{% static 'images/unlisted.jpg' %}" class="dker" alt="...">
                          </span>
                          <span class="hidden-nav-xs clear">
                            <span class="block m-l">
                              <strong class="font-bold text-lt">游客</strong>
                            </span>
                            <span class="text-muted text-xs block m-l"></span>
                          </span>
                      </a>
                  {% endif %}
                  </div>
                </div>
            </footer>
          </section>
        </aside>
        <!-- /.aside -->
        <section id="content">
          {% block aside %}
          {% endblock aside %}
            <footer class="footer bg-dark">
                  <div id="jp_container_N">
                    <div class="jp-type-playlist">
                      <div id="jplayer_N" class="jp-jplayer hide"></div>
                      <div class="jp-gui">
                        <div class="jp-video-play hide">
                          <a class="jp-video-play-icon">play</a>
                        </div>
                        <div class="jp-interface">
                          <div style="height: 1px;width: 1px;overflow: hidden;">
                            <audio controls="controls" height="100" width="100" class="nn">
                                <!-- <source src="./mp3/童话镇.mp3" type="audio/mp3" /> -->
                            </audio>
                          </div>
                          <div class="jp-controls">
                              <!-- 上一首 -->
                            <div onclick="playafter()"><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a></div>
                            <div>
                              <a class="jp-play" onclick="goon()"><i class="icon-control-play i-2x"></i></a>
                              <a class="jp-pause hid" onclick="stopmusic()"><i class="icon-control-pause i-2x"></i></a>
                            </div>
                              <!-- 下一首 -->
                            <div onclick="playnext()"><a class="jp-next"><i class="icon-control-forward i-lg"></i></a></div>
                            <div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a></div>
                            <div><a class="" data-toggle="dropdown" data-target="#playlist"><i class="icon-list"></i></a></div>
                            <div class="jp-progress hidden-xs">
                              <div class="jp-seek-bar bg-info">
                                <div class="jp-play-bar bg-info">
                                </div>
                                <div class="jp-title text-lt">
                                  <ul>
                                    <li class="title-mp3"></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
{#                            <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>#}
{#                            <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>#}
                            <div class="hidden-xs hidden-sm">
                              <a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
                              <a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
                            </div>
                            <div class="hidden-xs hidden-sm jp-volume">
                              <div class="jp-volume-bar dk" onclick="changeprobar(event)">
                                <div class="jp-volume-bar-value lter"></div>
                              </div>
                            </div>
                            <div>
                              <a class="jp-shuffle" title="shuffle" onclick="circleplay()"><i class="icon-shuffle text-muted"></i></a>
                              <a class="jp-shuffle-off hid" title="shuffle off"><i class="icon-shuffle text-lt"></i></a>
                            </div>
                            <div>
                              <a class="jp-repeat" title="repeat" onclick="playcircle()"><i class="icon-loop text-muted"></i></a>
                              <a class="jp-repeat-off hid" title="repeat off"><i class="icon-loop text-lt"></i></a>
                            </div>
                            <div class="hide">
                              <a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
                              <a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="jp-playlist dropup" id="playlist">
                        <ul class="dropdown-menu aside-xl dker">
                          <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                          <li class="list-group-item"></li>
                        </ul>
                      </div>
{#                      <div class="jp-no-solution hide">#}
{#                        <span>Update Required</span>#}
{#                        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.#}
{#                      </div>#}
                    </div>
                  </div>
                </footer>
              </section>
{#              <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>#}
            </section>
          </section>
{#        </section>#}
{#      </section>#}
    <script type="text/javascript">
      function show_toast(level, msg, image) {
          Lobibox.notify(level,{
              sound: false,
              img: image,
              msg: msg,
          })
      }
    </script>
    <script type="text/javascript">
      function show_toast1(level, msg) {
          Lobibox.notify(level,{
              sound: false,
              msg: msg,
          })
      }
    </script>
    <script>
        function toast_warning() {
            Lobibox.notify('warning', {
                sound: false,
                icon: false,
                msg: '登录之后才能进行此操作！'})
        }
    </script>
    <script type="text/javascript">
        var j; //用于判断是否重复点击
        var iscircle = false; //默认不重复播放
        var playflag = false; //是否播放状态
        var Refreshnew; //进度条定时器
        var index_position; //当前播放音乐的位置  0,1,2,3,4...
        var playingid;
        var typedata;
        var musicspace = document.getElementsByClassName('nn')[0]; //音乐支点
        let jprepeat = document.getElementsByClassName('jp-repeat')[0]; //重复播放
        let jpshuffle = document.getElementsByClassName('jp-shuffle')[0]; //随机播放
        let currentpro = document.getElementsByClassName('jp-volume-bar-value')[0];
        let obj = mp3_list;
        //存储
        localStorage.setItem("mp3list", JSON.stringify(mp3_list));
        //读取
        let jpause = document.getElementsByClassName('jp-pause')[0];
        let jplay = document.getElementsByClassName('jp-play')[0];
        let music_icon = document.getElementsByClassName('music-icon');
        let title = document.getElementsByClassName('title-mp3')[0];
        var read = JSON.parse(localStorage.getItem('mp3list'));
        window.onbeforeunload = onbeforeunload_handler;
        //页面刷新时或跳转时
        function onbeforeunload_handler() {
            let currentt = musicspace.currentTime;
            localStorage.setItem('currentTime', currentt);
            localStorage.setItem('duration', musicspace.duration)
        }
            (async function() {
            playingid =JSON.parse(localStorage.getItem('musicid')).videoid;
            typedata = JSON.parse(localStorage.getItem('mp3list'));
            if (playingid) {
                typedata.forEach((item, index) => {
                    if (item.videoid === playingid) {
                        index_position = index;
                        localStorage.setItem('musicid',JSON.stringify(item))

                    }
                });
                await get_playinfo(playingid).then(data => {
                    musicspace.src = data.url;
                    musicspace.currentTime = localStorage.getItem('currentTime');
                    title.innerHTML=JSON.parse(localStorage.getItem('musicid')).name;
                    currentpro.style.width = localStorage.getItem('currentTime') / localStorage.getItem('duration') * 100 + '%';
                    if(localStorage.getItem('playflag')==='play'){
                        goon()
                    }
                })
            }
        })();
        //点击某一音乐获取音乐id,并将id存储到缓存
        function get_musicid(event) {
            let id = event.currentTarget.getAttribute('videoid');
            playingid = localStorage.getItem('musicid');
            return id;
        }
        //通过音乐id,获取到音乐的播放信息
        function get_playinfo(musicid) {
            return new Promise((resolve, reject) => {
                typedata.forEach(item => {
                    if (item.videoid === musicid) {
                        resolve(item)
                    }
                })
            })
        }
        //点击音乐进行播放
        async function playmusic(event) {
            let musicid = get_musicid(event);
            typedata = JSON.parse(localStorage.getItem('mp3list'));
            typedata.forEach((item, index) => {
                if (item.videoid === musicid) {
                    index_position = index;
                    localStorage.setItem('musicid',JSON.stringify(item))
                }
            });
            clearInterval(Refreshnew);
            if (!j) {
                j = musicid
            } else {
                if (j === musicid && playflag) {
                    stopmusic()
                } else {
                    j = musicid
                }
            }
            playmusicid(musicid, index_position);
            if (iscircle === false) {
                circleplay()
            }
        }
        //音乐id进行播放
        async function playmusicid(playingid, index_position) {
            localStorage.setItem('musicid',JSON.stringify(typedata[index_position]));
            clearInterval(Refreshnew);
            title.innerHTML=JSON.parse(localStorage.getItem('musicid')).name;
            let icon = music_icon[index_position];
            Array.prototype.forEach.call(music_icon, function(item) {
                item.classList.remove('icon-control-pause');
                item.classList.add('fa-play-circle')
            });
            icon.classList.remove('fa-play-circle');
            icon.classList.add('icon-control-pause');
            jpause.classList.remove('hid');
            jplay.classList.add('hid');
            await get_playinfo(playingid).then(data => {
                musicspace.src = data.url;
                musicspace.play();
                playflag = true;
                localStorage.setItem('playflag', 'play');
                setTimeout(function() {
                    progressbar(playingid)
                }, 500)
            })
        }
        //自动按顺序播放
        function circleplay() {
            musicspace.removeAttribute('loop');
            jpshuffle.classList.add('hid');
            jprepeat.classList.remove('hid');
            musicspace.addEventListener('ended', function() {
                clearInterval(Refreshnew);
                playnext();
                iscircle = false
            }, false);
        }
        //点击音乐暂停
        function stopmusic() {
            clearInterval(Refreshnew);
            let icon = music_icon[index_position];
            musicspace.pause();
            playflag = false;
            localStorage.setItem('playflag', 'stop');
            icon.classList.remove('icon-control-pause');
            icon.classList.add('fa-play-circle');
            jpause.classList.add('hid');
            jplay.classList.remove('hid')
        }
        //点击
        function isplay(event) {
            clearInterval(Refreshnew);
            if (playflag) {
                if (event.currentTarget.getAttribute('videoid') !== j) {
                    playmusic(event)
                } else {
                    stopmusic(event)
                }
            } else {
                playmusic(event)
            }
        }
        //继续播放
        function goon() {
            musicspace.play();
            jpause.classList.remove('hid');
            jplay.classList.add('hid');
            setTimeout(function() {
                progressbar(playingid)
            }, 500);
            playflag = true;
            localStorage.setItem('playflag', 'play');
            music_icon[index_position].classList.remove('fa-play-circle');
            music_icon[index_position].classList.add('icon-control-pause')
            circleplay()
        }
        //重复播放
        function playcircle() {
            if (playingid) {
                musicspace.setAttribute('loop', true);
                jprepeat.classList.add('hid');
                jpshuffle.classList.remove('hid');
                iscircle = true
            }
        }
        //进度条样式
        function progressbar(playingid) {
            let total = musicspace.duration;
            Refreshnew = setInterval(function() {
                let current = musicspace.currentTime;
                currentpro.style.width = current / total * 100 + '%';
                if (current >= total) {
                    clearInterval(Refreshnew)
                }
            }, 1000)
        }
        //调整进度条
        function changeprobar(event) {
            let Curwidth = event.offsetX;
            currentpro.style.width = Curwidth / 50 * 100 + '%';
            let total = musicspace.duration;
            musicspace.currentTime = Curwidth / 50 * total
        }
        //上一首
        function playafter() {
            if (index_position === 0) {
                index_position = typedata.length - 1
            } else {
                index_position = index_position - 1
            }
            let id = typedata[index_position].videoid;
            playmusicid(id, index_position)
        }
        //切换下一首
        function playnext() {
            if (index_position === typedata.length - 1) {
                index_position = 0
            } else {
                index_position = index_position + 1
            }
            let id = typedata[index_position].videoid;
            playmusicid(id, index_position)
        }
    </script>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script>
        // 直接跳转不知为何会请求两次页面
        function jump(url) {
            window.location.href = url
        }
    </script>
    <script src="{% static 'js/demo.js' %}"></script>
    <script src="{% static 'js/lobibox.min.js' %}"></script>
      <!-- Bootstrap -->
    <script src="{% static 'js/bootstrap.js' %}"></script>
      <!-- App -->
    <script src="{% static 'js/app.js' %}"></script>
    <script src="{% static 'js/slimscroll/jquery.slimscroll.min.js' %}"></script>
    <script src="{% static 'js/app.plugin.js' %}"></script>
</body>
</html>